<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="欢迎"></title>
    <!--<link rel="stylesheet" th:href="@{/layui/css/layui.css}">-->
</head>
<style>
    .layui-form-item .layui-inline {
        margin-bottom: 5px;
        margin-right: 0;
    }
</style>
<body>
<div class=""><!--layui-container-->
    <div class="layui-fluid " style="background:#fcf9f9;">
        <div class="layui-row layui-col-space15" style="margin-top: 10px;">
            <div class="layui-form layui-col-md12" lay-filter="component-form-element">
                <div class="layui-form-item">
                    <div class="layui-card">
                        <div class="layui-card-header">输入框</div>
                        <div class="layui-card-body layui-row layui-col-space15 ">
                            <!--line 1 -->
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">证件类型：</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input" type="text" placeholder=" ">
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">证件号码：</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">教师姓名：</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">性别：</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input">
                                </div>
                            </div>
                            <!--line 2 -->
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">国别：</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input" type="text" placeholder=" ">
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">出生日期：</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input" id="birth">
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">联系电话：</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">居住地：</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="layui-col-md12" style="text-align: center;">
                    <div class="layui-btn-group">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>

            </div>
        </div>

        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">加入表单元素</div>
                        <div class="layui-card-body">
                            <table class="layui-hide" id="test-table-form"></table>

                            <script type="text/html" id="test-table-switchTpl">
                                <!-- 这里的 checked 的状态只是演示 -->
                                <input type="checkbox" name="sex" lay-skin="switch" lay-text="女|男"
                                       lay-filter="test-table-sexDemo"
                                       value="{{ d.id }}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{
                                       d.id==
                                       10003 ? 'checked' : '' }}>
                            </script>

                            <script type="text/html" id="test-table-checkboxTpl">
                                <!-- 这里的 checked 的状态只是演示 -->
                                <input type="checkbox" name="lock" title="锁定" lay-filter="test-table-lockDemo"
                                       value="{{d.id}}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{
                                       d.id==
                                       10006 ? 'checked' : '' }}>
                            </script>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--        富文本-->
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">加入表单元素</div>
                        <div class="layui-card-body">
                            <div><textarea name="" id="edit" cols="30" rows="10"></textarea></div>
                            <div><textarea name="" id="container" cols="30" rows="10"></textarea></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <!--<script th:src="@{/layui/layui.js}"></script>-->
    <script>
        layui.use(['form', 'table', 'tinymce'], function () {
            var $ = layui.$
                , element = layui.element
                , table = layui.table
                , form = layui.form;

            // 富文本
            var tinymce = layui.tinymce
            // 接口
            // @RequestMapping("/uploadR")
            // public Object uploadImgR(@RequestParam("edit") MultipartFile file) {
            //     if (file.isEmpty()) {
            //         return ResponseData.error("请选择文件");
            //     }
            //     String path = fileUploadService.uploadImg(file);
            //     String url = super.getHttpServletRequest().getRequestURL().toString();
            //     url = url.substring(0, url.indexOf("education")) + "education/file/previewImg/";
            //     path = path.replace(DefaultConts.basefilepath, url);
            //     return new Dict().set("code", 0).set("msg", "成功")
            //         .set("data", path);
            // }
            // 刷新 （初始化）
            debugger
            var edit = tinymce.render({
                elem: "#container"
                , images_upload_url: '/education/file/uploadR'
                , height: 600
                , width: '100%'
            });
            var edit2 = tinymce.render({
                elem: "#edit"
                , images_upload_url: '/education/file/uploadR'
                , height: 600
                , width: '100%'
            });
            // 取值和赋值
            // var cont = tinymce.get('#edit').getContent();
            // tinymce.get('#edit').setContent(cont);


            form.render(null, 'component-form-element');
            form.on('submit(component-form-element)', function (data) {
                // layer.msg(JSON.stringify(data.field));
                return false;
            });


            table.render({
                elem: '#test-table-form'
                , url: '/test/page'
                , cellMinWidth: 80
                , cols: [
                    [
                        {type: 'numbers'}
                        , {type: 'checkbox'}
                        , {field: 'id', title: 'ID', width: 100, unresize: true, sort: true}
                        , {field: 'username', title: '用户名'}
                        , {field: 'city', title: '城市'}
                        , {field: 'wealth', title: '财富', minWidth: 120, sort: true}
                        , {field: 'sex', title: '性别', width: 85, templet: '#test-table-switchTpl', unresize: true}
                        , {
                        field: 'lock',
                        title: '是否锁定',
                        width: 120,
                        templet: '#test-table-checkboxTpl',
                        unresize: true
                    }
                    ]
                ]
                , page: true
            });

            //监听性别操作
            form.on('switch(test-table-sexDemo)', function (obj) {
                var json = JSON.parse(decodeURIComponent($(this).data('json')));
                layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);

                json = table.clearCacheKey(json);
                console.log(json); //当前行数据
            });

            //监听锁定操作
            form.on('checkbox(test-table-lockDemo)', function (obj) {
                var json = JSON.parse(decodeURIComponent($(this).data('json')));
                layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);

                json = table.clearCacheKey(json);
                console.log(json); //当前行数据
            });

        });
    </script>
</div>
</body>
</html>